<template>
  <div ref="container" class="container" :style="{width:width+'px',height:height+'px'}"><slot/></div>
</template>
<script>

export default {
  name: 'Container',
  props: {
    width: {
      type: Number,
      default: function () {
        return 1920
      }
    },
    height: {
      type: Number,
      default: function () {
        return 1080
      }
    }
  },
  methods: {
    scale: function () {
      var widthScale = document.body.clientWidth / this.width;
      var heightScale = document.body.clientHeight / this.height;
      this.$refs.container.style.transform = 'scale(' + widthScale + ',' + heightScale + ')';
    }
  },
  mounted () {
    this.$nextTick(function () {
      // 仅在整个视图都被渲染之后才会运行的代码
      this.scale();
      window.addEventListener('resize', this.scale);
    })
  }
}
</script>

<style scoped>
@import './container.css';
</style>